<template>
    <base-panel>
        <top-simple-search @addFun="toAdd" @click="toSearch">
          <template slot="other-button">
            <el-upload  v-loading.fullscreen.lock="loading"  element-loading-text="正在导入，请稍后" v-if="hasPermissions('daoru')" style="display: inline-block; margin:0 10px" ref="files" :action="fileNameAction" accep=".xlsx,.xls" :show-file-list="false"
                        :before-upload="fileNameBeforeUpload" :on-success="successHandle">
              <el-button size="small" type="primary" >导入</el-button>
            </el-upload>
            <el-button @click="toDownloadMoban" v-if="hasPermissions('daoru')" type="primary" plain>导入模版下载</el-button>
          </template>
        </top-simple-search>
        <simple-table  ref="myTable" :key="tableKey" lazy :load="load" :showNo = false :tree-props="{ hasChildren: 'has_children', children: 'children' }" :formatter="dataFormatter">
            <el-table-column align="left" prop="name" label="名称"/>
            <el-table-column align="left" label="操作">
                <template slot-scope="{row}">
                    <edit-button @click="toEdit(row)"></edit-button>
                    <delete-button @click="toDelete(row.id)"></delete-button>
                </template>
            </el-table-column>
        </simple-table>
        <detail-dialog :visible.sync="visible" v-if="visible" :categoryList="categoryList" @reloadList="reloadList" :row="currRow" :disabled="disabled"></detail-dialog>
    </base-panel>

</template>
<script>
    import DetailDialog from "./DetailDialog";
    import simpleTable from "@/mixins/SimpleTable";
    import address from "@/api/onlineRepair/address/index"
    import XEUtils from "xe-utils";
    export default {
        name:"AddressList",
        mixins:[simpleTable],
        components: {DetailDialog},
        data(){
            return{
                listVisible:false,
                categoryList:[],
                tableKey:0,
                loading:false
            }
        },
        mounted() {
            this.getCategoryList()
        },
        computed: {
          fileNameAction() {
            return process.env.VUE_APP_BASE_API + "/api/address/import/xls/";
          },
        },
        methods:{
            toDownloadMoban() {
              window.open(`${process.env.VUE_APP_BASE_API}/api/address/download/empty/xls/`)
            },
            fileNameBeforeUpload(file) {
              let isRightSize = file.size / 1024 / 1024 < 30
              if (file.type.indexOf("application/vnd") === -1) {
                this.$message.error("只能上传XLS文件!");
                return false;
              }
              if (!isRightSize) {
                this.$message.error('文件大小超过 30MB')
                return isRightSize
              }
              this.loading = true
            },
            successHandle(res) {
              if (res.code == 0) {
                this.getList()
                this.msgSuccess(res.msg);
              } else {
                this.$message.error(res.msg);
              }
              this.loading = false
            },
            reloadList(){
                this.getList()
                this.getCategoryList()
                this.$nextTick(()=>{
                    this.tableKey++;
                })
            },
            getCategoryList(){
                address.getList().then(res=>{
                    this.categoryList =  this.handleTree(res.data,"id", "parent");
                })
            },
            load(tree, treeNode, resolve) {
                address.getAreasListId(tree.id).then(res=>{
                    let array = res.data.subs
                    if (array.length > 0) {
                        resolve(array)
                    }else {
                        resolve([])
                    }
                })
            },
            dataFormatter(data) {
                return XEUtils.toArrayTree(data, {strict: true, parentKey: 'parent', key: 'id', children: 'children'});
            },
            toShowList(row){
                this.currRow = row
                this.listVisible = true
            }
        }
    }
</script>
<style lang="scss" scoped>
    // 修改图标
    ::v-deep .el-icon-arrow-right:before {// content: "+";color: #1890ff;font-size: 20px;font-weight: 700px;
    }
    ::v-deep .el-table__expand-icon .el-icon-arrow-right:before {
        content: "+";
        color: #1e82e0;
        font-size: 22px;
        font-weight: bold;
    }
    ::v-deep [class*="el-table__row--level"] .el-table__expand-icon {transform: rotate(0);
    }
    ::v-deep .el-table__expand-icon--expanded .el-icon-arrow-right:before {
        content: "-";
        color: #1e82e0;
        font-size: 30px;
        font-weight: bold;
    }
    ::v-deep .el-table__placeholder::before {margin-left: 20px;
    }
</style>
